### Cascading Order

If more than one style is specified for a WML element, the multiple style definitions cascade into one style definition. Many factors affect the precedence of styles, including:

- The default style of the browser on the phone, that is, how elements are presented in the absence of presentation rules from a style sheet.
- Inheritance rules under which style rules are inherited by elements.
- A style rule that is more specific takes precedence over a less specific, conflicting rule. For example, a style rule applied to a class of elements takes precedence over a rule that applies to an element in general. A rule that applies to an element ID takes precedence over both the class of elements style and that of an element in general.
- The most recent style rule has only the scope of the current tag and its embedded tags. Once the current tag closes, the tag rule with a higher hierarcy replaces the closed tag.
- If a style rule in a style sheet conflicts with a presentational attribute of a WML element, the style sheet takes precedence.

NOTE: The 9620 and 9630 only support four grayscale color. Color references are only for illustration purposes.

In lieu of a specific rule for a particular tag element, properties and their values for tags within tags are inherited from their parent tag. Thus, setting a property for the <wml> tag effectively applies that property to every tag in the body of the document, except for those that specifically override it. To make all the text in the page blue, code the following:

    wml style="color:blue;"

rather than creating a rule for every tag used in the page.

This inheritance extends to any level. If the page author later creates a <p> tag with different color text, the style-conscious browser displays all the contents of <p> tag and all its included tags in that new color. When the <p> tag ends, the color reverts to that of the <wml> tag. For example, for WML:

- <card> tags inherit all <wml> tag properties.
- All <card> properties are inherited by <p> and <do> tags.
- All <p> tag properties are inherited by other wml tags.

This inheritance is not restricted to its immediate child tags, but can cascade further down.

Also note that some inherited properties may not have meaning in the scope of the child tag. For example, a background color defined for a <card> tag has no meaning for a <onevent> tag that has no visual rendering.

Table 16 shows which WML tags are parent and which tags inherit properties.

Table 16: WML Inheritance Table
Col1 | Col2 | Col3 | Col4 | Col5 | Col6 | Col7 | Col8 | Col9 | Col10
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
No inheritance. | Tag in column inherits from tag in column 1. | Tag in column inherits from tag in column 1. | Tag in column inherits from tag in column 1. | Tag in column inherits from tag in column 1. | Tag in column inherits from tag in column 1. | Tag in column inherits from tag in column 1. | Tag in column inherits from tag in column 1. | Tag in column inherits from tag in column 1. | Tag in column inherits from tag in column 1.
wml |  |  |  |  |  |  |  |  |
| card | do | go | postfield |  |  |  |  |
|  |  |  | setvar |  |  |  |  |
|  |  | noop |  |  |  |  |  |
|  |  | prev | setvar |  |  |  |  |
|  |  | refresh | setvar |  |  |  |  |
|  | onevent | go | postfield |  |  |  |  |
|  |  |  | setvar |  |  |  |  |
|  |  | noop |  |  |  |  |  |
|  |  | prev | setvar |  |  |  |  |
|  |  | refresh | setvar |  |  |  |  |
|  | timer |  |  |  |  |  |  |
|  | p |  | a | br |  |  |  |
|  |  |  |  | img |  |  |  |
|  |  |  | anchor | br |  |  |  |
|  |  |  |  | go | postfield |  |  |
|  |  |  |  |  | setvar |  |  |
|  |  |  |  | img |  |  |  |
|  |  |  |  | prev | setvar |  |  |
|  |  |  |  | refresh | setvar |  |  |
|  |  |  | b |  |  |  |  |
|  |  |  | big |  |  |  |  |
|  |  |  | br |  |  |  |  |
|  |  |  | do | go | postfield |  |  |
|  |  |  |  |  | setvar |  |  |
|  |  |  |  | noop |  |  |  |
|  |  |  |  | prev | setvar |  |  |
|  |  |  |  | refresh | setvar |  |  |
|  |  |  | em |  |  |  |  |
|  |  |  | fieldset |  |  |  |  |
|  |  |  | i |  |  |  |  |
|  |  |  | input |  |  |  |  |
|  |  |  | img |  |  |  |  |
|  |  |  | select |  |  |  |  |
|  |  |  |  | optgroup | optgroup |  |  |
|  |  |  |  |  | option | onevent | go | postfield
|  |  |  |  |  |  |  |  | setvar
|  |  |  |  |  |  |  | noop |
|  |  |  |  |  |  |  | prev | setvar
|  |  |  |  |  |  |  | refresh | setvar
|  |  |  |  | option | onevent | go | postfield |
|  |  |  |  |  |  |  | setvar |
|  |  |  |  |  |  | noop |  |
|  |  |  |  |  |  | prev | setvar |
|  |  |  |  |  |  | refresh | setvar |
|  |  |  | small |  |  |  |  |
|  |  |  | strong |  |  |  |  |
|  |  |  | table | tr | td |  |  |
|  |  |  | u |  |  |  |  |
| head | access |  |  |  |  |  |  |
|  | meta |  |  |  |  |  |  |
| template | do | go | postfield |  |  |  |  |
|  |  |  | setvar |  |  |  |  |
|  |  | noop |  |  |  |  |  |
|  |  | prev | setvar |  |  |  |  |
|  |  | refresh | setvar |  |  |  |  |
|  | onevent | go | postfield |  |  |  |  |
|  |  |  | setvar |  |  |  |  |
|  |  | noop |  |  |  |  |  |
|  |  | prev | setvar |  |  |  |  |
|  |  | refresh | setvar |  |  |  |  |

Table 17 provides a list of CSS2-affected WML tags. Applicable tags are indicated by a Yes. The Color column applies to the foreground color, while the Background Color column is the alternative used to set the background color.

Table 17: WML Tags to Which CSS2 Applies
WML Tag | CSS2 Property
--- | ---
| Color | Background Color
wml | Yes | Yes
card | Yes | Yes
template | Yes | Yes
br/ | Yes | Yes - see Note below
p | Yes | Yes
a | Yes | Yes
anchor | Yes | Yes
img | Yes | Yes
do | Yes | Yes
onevent |  |
postfield |  |
go |  |
noop |  |
prev |  |
refresh |  |
input | Yes | Yes
optgroup | Yes | Yes
option | Yes | Yes
select |  |
setvar |  |
timer |  |

NOTE: The <br/> tag’s color setting needs to support color property so the inverse color shows when a line with this tag is in focus.